<!--
 * @Author: your name
 * @Date: 2020-05-29 16:48:48
 * @LastEditTime: 2020-06-02 15:14:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mobile_project_200106\mobile_project\src\pages\logins\register.vue
--> 
<template>
  <div>
    <van-nav-bar title="注册" left-text="返回" left-arrow @click-left="back" />

    <van-form @submit="onSubmit">
      <!-- 通过 pattern 进行正则校验 -->

      <van-field
        v-model="registerFrom.username"
        name="username"
        label="用户名"
        required
        :rules="[{ required: true, message: '请填写用户名' }]"
      />

      <van-field
        v-model="registerFrom.password"
        name="password"
        label="密码"
        type="password"
        required
        :rules="[{ required: true, message: '请填写密码' }]"
      />

      <van-field
        v-model="registerFrom.email"
        name="email"
        center
        required
        clearable
        label="邮箱"
        :rules="[{ validator:emailValidator,required: true, message: '请输入正确邮箱' }]"
      >
        <template #button>
          <van-button
            size="small"
            type="primary"
            @click="sendCode"
            :disabled="isdisabled"
          >{{isdisabled ? num+'s':'发送验证码'}}</van-button>
        </template>
      </van-field>

      <van-field
        v-model="registerFrom.phone"
        label="电话"
        name="phone"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />

      <van-field name="radio" label="性别">
        <template #input>
          <van-radio-group v-model="registerFrom.sex" direction="horizontal">
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        required
        v-model="registerFrom.code"
        name="code"
        label="邮箱验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import * as api from "@/request/api/register.js";
export default {
  data() {
    return {
      registerFrom: {},
      isdisabled: false,
      radio: "1",
      num: 5
      // pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ //邮箱正则
    };
  },
  methods: {
    back() {
      //返回上一页
      this.$router.go(-1);
    },
    async API_sendCode(email) {
      //发送验证码接口
      let result = {
        email //邮箱
      };
      return await api.sendCode(result);
    },
    async sendCode() {
      //发送验证码
      this.isdisabled = true;
      let time = setInterval(() => {
        if (this.num > 1) {
          this.num--;
        } else {
          this.isdisabled = false;
          this.num = 5;
          clearInterval(time);
        }
      }, 1000);

      let res = await this.API_sendCode(this.registerFrom.email);
      if (res.data.code === 1000) {
        this.$toast.success("发送成功");
      } else {
        this.$toast.fail("发送失败，请检查邮箱格式");
      }
    },

    async API_register(name, pwd, email, phone, sex, code) {
      //注册接口,请求JSON参数

      let result = {
        name,
        pwd,
        email,
        phone,
        sex,
        code
      };

      return await api.register(result);
    },

    async onSubmit() {
      //提交按钮
      let { username, password, email, phone, sex, code } = this.registerFrom;//结构赋值
      let res = await this.API_register(
        username,
        password,
        email,
        phone,
        sex,
        code
      );
      console.log(res);
      if (res.data.code === 1000) {
        this.$toast.success("注册成功");
        this.$router.push("/login");
      } else if (res.data.code === 1001) {
        this.$toast.fail(res.data.data);
      } else {
        this.$toast.fail("注册失败");
      }
    },
    emailValidator(val) {
      //邮箱正则
      let reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      return reg.test(val);
    }
  }
};
</script>

<style>
</style>